<template>
  <el-row>
    <el-col :span="24">
      <el-form label-position="left" label-width="120px">
        <!--订单信息-->
        <Portlet class="show" title="订单信息">
          <div slot="tools" v-if="toEdit">
            <el-button type="primary" @click="toEditRedirect">修改</el-button>
          </div>
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="订单号:">
              <span>{{ chOrder.orderNo}}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12" :xl="6">
            <el-form-item label="业务类型：">
              <span >{{chOrder.business}}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12" :xl="6">
            <el-form-item label="服务类型：">
              <span>{{chOrder.service}} {{chOrder.addedService}}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="下单方式：">
              <span>{{detail.biddingType}}</span>
              <!--<span>{{ chOrder.storageTypeCode | filterDataBaseDictionary }}</span>-->
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="下单时间：">
              <span>{{ chOrder.foundDate | unixTimestampFilter('YYYY-MM-DD HH:ss') }}</span>
            </el-form-item>
          </el-col>
        </Portlet>
        <Portlet class="show" title="商品信息">
          <div class="clearfix" slot="header">
            <span>商品信息</span>
            <span style="padding-left:10px; font-size: 14px;">商品类型：{{getType(chOrder.productType)}}</span>
          </div>
          <el-row :gutter="15">
            <el-form :model="model" :label-position="labelPosition" ref="ruleForm" label-width="100px">
              <el-col :lg="12" :md="24" v-for="(item, index) in model.productParameterList" :key="index">
              <el-row :gutter="15">
                <el-col :lg="12" :md="24" v-if="chOrder.productType != 2">
                  <el-form-item label="商品类别:"
                                :prop="'productParameterList.' + index + '.productCodeArr'"
                                :rules="{required: true, message: '请选择商品类型', trigger: 'change', type: 'array'}">
                    <product-select :key="index" ref="productSelect" v-model="item.productCodeArr"></product-select>
                  </el-form-item>
                </el-col>
                <el-col :lg="12" :md="24" v-else>
                  <el-form-item label="商品类别:">
                    <span>{{item.big_class}} {{item.middle_class}}</span>
                  </el-form-item>
                </el-col>
                <el-col :lg="12" :md="24">
                  <el-form-item label="商品数量:">
                    <span>{{item.proudctNum}}套</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="商品名称:">
                    <span>{{item.productName}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="选择图片:"
                                :prop="'productParameterList.' + index + '.photo'"
                                :rules="{required: true, message: '请上传图片', trigger: 'change', type: 'array'}"
                  >
                    <p>从 <span class="blue-color text-cursor" @click="uploadImg(item)">我的产品</span> 中选择
                      <span style="margin-left: 30px">(1~4张, <span :class="{textColor: item.photo.length >= 4}">{{item.photo.length}}/4</span>)</span>
                      <span style="margin-left: 30px;color: red" v-if="item.photo.length >= 4">提示：图片上传数量已达到限制</span>
                    </p>
                    <upload-image v-model="item.photo" @setFileId="setFileId" :formData="{group: id ? id : 'id'}"
                                  :max="4"></upload-image>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            </el-form>
          </el-row>
        </Portlet>
        <!--总包件信息-->
        <Portlet class="show">
          <el-col :lg="8" :md="12" :xl="6">
            <el-form-item label="总包件：">
              <span>{{ chOrder.totalPackage}} 件</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="总体积:">
              <span>{{  chOrder.totalVolume }} m³</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12" :xl="6">
            <el-form-item label="总重量：">
              <span >{{  chOrder.totalWeight }} kg</span>
            </el-form-item>
          </el-col>
        </Portlet>
        <!--客户信息-->
        <Portlet class="show" title="客户信息">
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="客户姓名：">
              <span>{{ orderConsigneeInfo.consigneName }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="客户电话：">
              <span>{{ orderConsigneeInfo.consignePhone }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="客户地址：">
              <span>{{orderConsigneeInfo.consigneProvince}} {{orderConsigneeInfo.consigneCity}} {{orderConsigneeInfo.consigneDistrict}} {{orderConsigneeInfo.consigneAddress}}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="有无电梯：">
              <span>{{ orderConsigneeInfo.elevator ? '有' : '无' }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="楼层数：">
              <span>{{ orderConsigneeInfo.floor}}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="预约时间：">
              <!--<span style="color:red;">暂无/ 未知</span>-->
              <span>{{ chServiceAppointmentDispatch.start | unixTimestampFilter('YYYY/MM/DD') }} {{ chServiceAppointmentDispatch.timeInterval }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :md="12"  :xl="12">
            <el-form-item label="客户备注：">
              <span>{{ orderConsigneeInfo.consigneMemo}}</span>
            </el-form-item>
          </el-col>

        </Portlet>
        <!--提货信息-->
        <PickupInfo @refresh="refresh" :detail="detail"></PickupInfo>
        <!--代收款-->
        <PaymentForGoods :detail="detail" v-if="chServiceCollectionCostList.length > 0"></PaymentForGoods>
        <!--费用信息-->
        <FeeDetail :detail="orderCosts"></FeeDetail>
        <!--核销-->
        <Portlet title="核销">
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="核销类型：">
              <span v-if="detail.verifitySource">{{ detail.verifitySource | filterDataBaseDictionary }}</span>
              <span v-else>无</span>
            </el-form-item>
          </el-col>

          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item v-if="verifityNoListStr" label="核销单号：">
              <span>{{ verifityNoListStr }}</span>
            </el-form-item>
          </el-col>
        </Portlet>

        <Portlet title="其他信息">
          <el-col :lg="8" :md="12" :xl="6">
            <el-form-item label="外部单号：">
              <span>{{ chOrder.orderSourceNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12" :xl="6">
            <el-form-item label="接单价：">
              <span>{{ chOrder.pickOrderMoney | decimalNumFilter }} 元</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12" :xl="6">
            <el-form-item label="总货值：">
              <span>{{ chOrder.cargoPrice|decimalNumFilter}} 元</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12" :xl="6">
            <el-form-item label="推单来源：">
              <span>{{ chOrder.outSourceWarehouse }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12" :xl="6">
            <el-form-item label="推单单号：">
              <span>{{ chOrder.outNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :md="12" :xl="12">
            <el-form-item label="订单备注：">
              <span>{{chOrder.memo}}</span>
            </el-form-item>
          </el-col>
        </Portlet>
        <Portlet class="box-card">
          <el-row :gutter="15">
            <el-col :span="24" style="text-align: center">
              <el-button type="primary" size="medium" :loading="loading" @click="submitForm($event, 'submit')">立即抛出
              </el-button>
            </el-col>
          </el-row>
        </Portlet>
      </el-form>
    </el-col>
    <product-modal :visible.sync="visibleProduct" ref="productModal" @addcheckShopping="addcheckShopping" :editPicture="editPicture"></product-modal>
  </el-row>
</template>
<script>
import {unixTimestampFilter, filterDataBaseDictionary, decimalNumFilter} from '@/filters'
import ProductModal from '@/views/fhb/temporary/ProductModal'
import PaymentForGoods from '@/views/oms/orders/serviceOrders/detail/PaymentForGoods'
import PickupInfo from '@/views/oms/orders/serviceOrders/detail/PickupInfo'
import {range, isInteger} from '@/utils/validate'
import {dotData} from '@/utils'
import FeeDetail from '@/views/oms/orders/serviceOrders/detail/FeeDetail'
export default {
  name: 'expatriateOrdersShow',
  components: {
    ProductModal,
    PaymentForGoods,
    PickupInfo,
    FeeDetail
  },
  filters: {
    decimalNumFilter,
    filterDataBaseDictionary,
    unixTimestampFilter
  },
  data() {
    return {
      toEdit: false,
      activeName: this.$route.query.tab ? String(this.$route.query.tab) : '1',
      id: this.$route.params.id,
      detail: {},
      loading: false,
      visibleProduct: false,
      productItem: '',
      newPictureArr: [],
      editPicture: true,
      chOrder: {},
      orderConsigneeInfo: {},
      chServiceAppointmentDispatch: {},
      orderCosts: [],
      productExtBeans: [],
      orderService: [],
      orderNodes: [],
      chServiceCollectionCostList: [],
      labelPosition: 'left',
      rules: {},
      model: {
        productParameterList: []
      }
    }
  },
  created() {
    this.getDetail()
  },
  computed: {
    // 核销单号
    verifityNoListStr() {
      let temp = this.detail.verifityNoList || []
      if (Array.isArray(temp)) {
        return temp.map(v => v.tradeCode).join(',')
      }
      return ''
    }
  },
  methods: {
    range,
    isInteger,
    getSummaries(param) {
      const {columns, data} = param
      const sums = []
      columns.forEach((column, index) => {
        const values = data.map(item => Number(item[column.property]))
        if (index === 0) {
          sums[index] = '合计'
        } else {
          if (column.property === 'proudctNum' || column.property === 'proudctPackNum' || column.property === 'installFee') {
            let temp = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = decimalNumFilter(temp, (column.property === 'proudctNum' || column.property === 'proudctPackNum') ? 0 : 2)
          } else {
            sums[index] = ''
          }
        }
      })
      return sums
    },
    getType(num) {
      if (num === 1) {
        return '标准产品'
      }
      if (num === 2) {
        return '通用产品'
      }
      if (num === 3) {
        return '自定义产品'
      }
    },
    showModal() {
      this.productItem = ''
      this.editPicture = false
      this.visibleProduct = true
    },
    uploadImg(item) {
      this.productItem = item
      this.editPicture = true
      this.visibleProduct = true
    },
    setFileId(fileId) {
      this.newPictureArr.push(fileId)
    },
    addcheckShopping(arr) {
      arr.forEach(item => {
        if (!Array.isArray(item.picture)) {
          item.picture = item.picture.split(',')
        }
        if (this.editPicture) {
          this.productItem.photo = item.picture
          this.productItem.productName = item.pictureName
          this.productItem.productCodeArr = item.productCodeArr
          this.productItem.productId = item.goodsBaseId
        }
      })
    },
    submitForm() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          let productBiddingBeanList = []
          this.model.productParameterList.forEach(v => {
            productBiddingBeanList.push({
              id: v.id,
              bigClassNo: v.productCodeArr[0],
              middleClassNo: v.productCodeArr[1],
              photo: v.photo.join(',')
            })
          })
          let submitData = {
            orderId: this.chOrder.id,
            productBiddingBeanList: productBiddingBeanList
          }
          let url = '/ms-terminal-order/bidding/create-bidding'
          this.$ajax.post(url, submitData).then(response => {
            this.loading = false
            if (response.success) {
              this.$confirm('抛出成功', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'success'
              }).then(_ => {
                this.$router.push({path: '/redirect/ss-oms/orders/expatriate/expatriateOrders/index'})
              })
            }
          }).finally(_ => {
            this.loading = false
          })
        }
      })
    },
    getDetail() {
      this.$ajax.get('/ms-terminal-order/orderData/getOrderDatails', {orderId: this.id}).then(response => {
        if (!response.data) {
          return
        }
        this.chOrder = response.data.chOrder || {}
        this.orderConsigneeInfo = response.data.chOrderConsigneeInfo || {}
        this.orderCosts = response.data.orderCosts || []
        if (Array.isArray(response.data.productExtBeans)) {
          const productParameterList = response.data.productExtBeans.map(v => { // 详情接口返回的数据和新增的不统一 进行映射
            let photoArr = []
            if (v.pictureId) {
              photoArr = v.pictureId.split(',')
            }
            v.photo = photoArr
            v.proudctNum = v.proudctNum
            let _arr = []
            if (v.big_class_no && v.middle_class_no) {
              _arr.push(v.big_class_no)
              _arr.push(v.middle_class_no)
            }
            v.productCodeArr = _arr
            return v
          })
          this.$set(this.model, 'productParameterList', productParameterList)
        }
        this.detail = response.data
        this.chServiceAppointmentDispatch = response.data.chServiceAppointmentDispatch || {}
        // 代收款费用信息
        this.chServiceCollectionCostList = dotData(response, 'data.chServiceCollectionCostList') || []
      })
    },
    refresh() {
    }
  }
}
</script>
